<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="">全部</el-menu-item>
          <el-menu-item index="1">待付款</el-menu-item>
          <el-menu-item index="2">待发货</el-menu-item>
          <el-menu-item index="4">交易完成</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top: 20px">
      <el-row>
        <el-col :span="3">
          <el-input
            placeholder="订单号"
            v-model="searchCondition.orderNum"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="optTime"
              type="datetimerange"
              start-placeholder="下单时间"
              end-placeholder="下单时间"
              :default-time="['12:00:00']"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="optTimeHandle"
            >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="2" :offset="6">
          <el-select
            v-model="searchCondition.payMethod"
            clearable
            placeholder="支付方式"
            @change="handlePayMethod"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.payMethod"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-input
            placeholder="商品名称"
            v-model="searchCondition.productName"
            clearable
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="3">
          <el-input
            placeholder="买家昵称"
            v-model="searchCondition.userName"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-input
            placeholder="手机号"
            v-model="searchCondition.userTel"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="3" :offset="1" style="margin-left: 43px">
          <el-input
            placeholder="商品编码"
            v-model="searchCondition.productId"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2" :offset="1" style="margin-left: 76px">
          <el-button type="primary" @click="selInfo">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row style="margin-top: 13px">
      <el-col :span="2">
        <i class="el-icon-s-operation" style="color: rgb(136, 136, 136)"
          >数据列表</i
        >
      </el-col>
      <el-col :span="2">
        <el-button size="mini" @click="printDispatchList">打印发货单</el-button>
      </el-col>
      <el-col :span="1">
        <!-- <el-button size="mini">删除</el-button> -->
      </el-col>
      <el-col :span="2">
        <el-button size="mini" @click="exportInfo">导出订单</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-col>
        <el-table
          id="table_excel"
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column prop="" label="" type="selection"> </el-table-column>
          <el-table-column prop="id" label="订单编号" width="180">
          </el-table-column>
          <el-table-column prop="actualAmount" label="订单金额" width="180">
          </el-table-column>
          <el-table-column prop="userName" label="买家信息">
            <template slot-scope="scope">
              <div>用户： {{ scope.row.userName }}</div>
              电话： {{ scope.row.userTel }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="下单时间">
          </el-table-column>
          <el-table-column prop="paymentId" label="支付方式">
            <template slot-scope="scope">
              {{ showPayMethod(scope.row.paymentId) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="订单状态">
            <template slot-scope="scope">
              {{ showOrderStatus(scope.row.state) }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="查看详情">
            <template slot-scope="scope">
              <el-link type="primary" @click="jumpDetail(scope.row.id)"
                >查看详情</el-link
              >&nbsp;&nbsp;
              <el-link
                v-if="scope.row.state == 2"
                type="primary"
                @click="deliverGoods(scope.row.id)"
                >去发货</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-col :span="7" :offset="15">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 5, 8, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @next-click="nextPage"
            @prev-click="prevPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 发货框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span></span>
      <el-row>
        <el-col :span="10">
          <el-select v-model="companyId" clearable placeholder="选择快递公司">
            <el-option
              v-for="item in logisticsCompanies"
              :key="item.id"
              :label="item.logisticsCompanyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 10px">
        <el-col :span="4"> 快递单号： </el-col>
        <el-col :span="10">
          <el-input placeholder="单号" v-model="courierNumber" :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="9"> 收货人： {{ addr.addressName }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="9"> 手机号：{{ addr.addressTel }} </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="14">
          地址： {{ addr.province }} {{ addr.city }} {{ addr.county
          }}{{ addr.detail }}
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="15"> 订单号： {{ orderId }}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOut">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.selPayMethod();
    this.searchOrderByCondition();
  },
  data() {
    return {
      orderId: "",
      addr: {},
      courierNumber: "",
      companyId: "",
      logisticsCompanies: [],
      dialogVisible: false,
      selectData: [],
      pageNum: 1,
      pageSize: 5,
      total: null,
      activeIndex: "",
      searchCondition: {
        payMethod: "",
        orderNum: "",
        orderStartTime: "",
        orderEndTime: "",
        productName: "",
        userName: "",
        userTel: "",
        productId: "",
        orderStatus: "",
      },
      options: [],
      tableData: [],
      optTime: [],
    };
  },
  methods: {
    sendOut() {
      if (this.companyId == "") {
        this.$message.error("请选择快递公司");
        return;
      }
      let sendOutDTO = {};
      sendOutDTO.orderId = this.orderId;
      sendOutDTO.addrDTO = this.addr;
      sendOutDTO.courierNumber = this.courierNumber;
      sendOutDTO.companyId = this.companyId;
      this.$axios
        .post("api/scss-server/sendOut", sendOutDTO)
        .then((response) => {
          if (response.data.code == 200) {
            this.dialogVisible = false;
            this.selInfo();
            this.$message({
              message: "发货成功",
              type: "success",
            });
          }
        });
    },
    deliverGoods(orderId) {
      // try{
      this.companyId = "";
      this.dialogVisible = true;
      this.$axios
        .get("api/scss-server/handleDeliverGoods", {
          params: { orderId: orderId },
        })
        .then((response) => {
          console.log(response);
          if (response.data.code == 200) {
            this.logisticsCompanies = response.data.data.logisticsCompanies;
            this.courierNumber = response.data.data.courierNumber;
            this.addr = response.data.data.addrDTO;
            this.orderId = response.data.data.orderId;
          }
        }).catch((err)=>{
console.log('err',err)
        });
      // }
      // catch (error) {
      //   errorHandler(error);
      // }
    },
    exportInfo() {
      this.$confirm("确定要导出当页件到Excel?", "导出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          setTimeout(() => {
            var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
            let tables = document.getElementById("table_excel"); //这里是绑定元素，输入你要导出的table表格的id
            let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
            const table_write = this.$XLSX.write(table_book, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              this.$FileSaver.saveAs(
                new Blob([table_write], { type: "application/octet-stream" }),
                `${this.title}.xlsx` //这里是文件名
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, table_write);
            }
            return table_write;
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
    showOrderStatus(id) {
      if (id == 1) {
        return "待付款";
      } else if (id == 2) {
        return "已付款";
      } else if (id == 3) {
        return "已发货";
      } else if (id == 4) {
        return "交易完成";
      } else if (id == 5) {
        return "已取消";
      }
    },
    jumpDetail(orderId) {
      this.$router.push({ path: "/orderDetail", query: { orderId: orderId } });
    },
    printDispatchList() {
      if (this.selectData.length == 0) {
        this.$message({
          message: "请选择一项订单，进行打印！",
          type: "warning",
        });
        return;
      }
      this.$router.push({
        path: "/dispatchList",
        query: { data: this.selectData },
      });
    },
    showPayMethod(id) {
      if (id == 2) {
        return "微信";
      } else if (id == 1) {
        return "支付宝";
      }
    },
    reset() {
      this.optTime = [];
      this.searchCondition = {
        payMethod: "",
        orderNum: "",
        orderStartTime: "",
        orderEndTime: "",
        productName: "",
        userName: "",
        userTel: "",
        productId: "",
        orderStatus: "",
      };
    },
    prevPage(val) {
      this.pageNum = val;
      this.searchOrderByCondition();
    },
    nextPage(val) {
      this.pageNum = val;
      this.searchOrderByCondition();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchOrderByCondition();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchOrderByCondition();
    },
    selInfo() {
      this.pageNum = 1;
      this.searchOrderByCondition();
    },
    searchOrderByCondition() {
      //   console.log(this.searchCondition);
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.searchCondition;
      this.$axios
        .post("api/scss-server/searchOrderByCondition", params)
        .then((response) => {
          // console.log(response.data);
          if (response.data.code == 200) {
            this.pageNum = response.data.data.pageNum;
            this.total = response.data.data.total;
            this.pageSize = response.data.data.pageSize;
            this.tableData = response.data.data.list;
          }
        });
    },
    handleSelect(key, keyPath) {
      // console.log(key);
      this.searchCondition.orderStatus = key;
      this.selInfo();
    },
    optTimeHandle() {
      this.searchCondition.orderStartTime = this.optTime[0];
      this.searchCondition.orderEndTime = this.optTime[1];
    },
    handleSelectionChange(val) {
      this.selectData = val;
    },
    handlePayMethod() {
      this.selInfo();
    },
    selPayMethod() {
      this.$axios.get("api/scss-server/selPayMethod").then((response) => {
        // console.log(response.data);
        if (response.data.code == 200) {
          this.options = response.data.data;
        }
      });
    },
  },
};
</script>

<style scoped></style>
